<template>
    <div>
        <div id="main3" class="main3_box"></div>
    </div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from 'echarts';
import { onMounted } from 'vue';
import 'echarts-liquidfill'
const props = defineProps({
    data: {
        type: Array,
        defalut: () => { }
    }
})
onMounted(() => {
    const yesterdayChartData = props.data
    // 表1
    const charEle3 = document.getElementById('main3') as HTMLElement;
    const charEch3: ECharts = init(charEle3);
    const option3 = {
        title: {
            // 标题
            text: '今日医疗器材库存',
            textStyle: {
                // 标题的样式
                // 字体颜色
                fontFamily: 'Microsoft YaHei', // 字体
            },
            left: 'center', // 定位
        },
        series: [{
            type: 'liquidFill',
            radius: '80%', //水球大小

            center: ['50%', '52%'],
            waveAnimation: true,

            color: [
                {
                    type: 'linear',
                    padding: 10,
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,

                            color: '#3A8AD1',
                        },
                        {
                            offset: 1,
                            color: '#69DAF9',
                        },
                    ],
                    globalCoord: false,
                },
            ],
            data: [props.data, props.data], // data个数代表波浪数
            amplitude: 10, //振幅

            backgroundStyle: {
                borderWidth: 2, //边框大小
                borderColor: '#21B9FF',//边框颜色
                color: 'rgba(62,207,254,1)',
                padding: 10,
            },
            label: {
                normal: {
                    textStyle: {
                        padding: 4,
                        fontSize: 24,
                        fontWeight: 'bold',
                        color: '#fff',

                    },
                },
            },
            outline: {

                borderDistance: 10,
                itemStyle: {

                    borderWidth: 4,
                    borderColor: '#21B9FF',
                    borderType: 'dotted',
                    borderDashOffset: 10
                },
            },
        }],
    };
    charEch3.setOption(option3);
})
</script>

<style scoped lang="scss">
.main3_box {
    width: 700px;
    height: 300px;
    // border: 1px solid #ccc;
}
</style>